<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ include file="/WEB-INF/jsp/include.jsp"%>
<html>
<head>
    <title>User's tables page</title>
    <c:url var="jquery_custom_css" value="/ui/jquery-ui-1.8.4.custom.css" />
    <link href="${jquery_custom_css}" rel="stylesheet" type="text/css" />
    <c:url var="jquery_treeview_css" value="/css/jquery.treeview.css" />
    <link href="${jquery_treeview_css}" rel="stylesheet" type="text/css" />
    <c:url var="housewifes_css" value="/css/housewifes.css" />
    <link href="${housewifes_css}" rel="stylesheet" type="text/css" />

    <c:url var="jquery_js" value="/script/jquery-1.4.2.js" />
    <script type="text/javascript" src="${jquery_js}"></script>
    <c:url var="jquery_cookie_js" value="/script/jquery.cookie.js" />
    <script type="text/javascript" src="${jquery_cookie_js}"></script>
    <c:url var="jquery_treeview_js" value="/script/jquery.treeview.js" />
    <script type="text/javascript" src="${jquery_treeview_js}"></script>
    <c:url var="jquery_custom_js" value="/script/jquery-ui-1.8.4.custom.min.js" />
    <script type="text/javascript" src="${jquery_custom_js}"></script>
    <c:url var="hw_js" value="/script/housewifes.js" />
    <script type="text/javascript" src="${hw_js}"></script>

    <script type="text/javascript">
    $(document).ready(function(){

        $(".dialog_link").add( $("a", this) ).hoverClass();

        $(".dialog_link").click(function() {
            showLoading();
            if (true) {
                return;
            }
            $("#dialog_container").dialog({
                "modal":true,
                "resizable":false,
                "title": 'select ware',
                minHeight: 450,
                minWidth: 650
            });
            $.ajax({
                url: '<c:url value="/get-select-wares-form.html"/>',
                type: 'GET',
                dataType: 'json',
                success: function(reply) {
                    if (reply) {
                        if (reply.error) {
                            alert('error:' + reply.error);
                        } else {
                            //alert(reply['formHtml']);
                            var container = "#dialog_container";
                            var containerPtr=$(container);
                            containerPtr.html(reply['formHtml']);

                            $("#wares_group_browser").treeview();

                            $(".folder").unbind("click.treeview").add( $("a", this) ).hoverClass();

                            $(".folder").each(function() {
                                var groupId = $(this).children(".hidden_id").text();
                                $(this).click(function() {
                                    onWaresGroupSelect(groupId, 0);
                                });
                            });
                        }
                    } else {
                        alert("Server error");
                    }
                },
                error: function(error) {
                    alert(error);
                    window.location.reload(true);
                }
            });
            //alert("show dialog");
        });

        var onWaresGroupSelect = function(groupId, page) {
            var container = "#dialog_container";
            $.ajax({
                url: '<c:url value="/get-wares-list.html"/>',
                type: 'GET',
                dataType: 'json',
                data: { "groupId": groupId, "page": page },
                success: function(reply) {
                    if (reply) {
                        if (reply.error) {
                            alert('error:' + reply.error);
                        } else {
                            var waresContainer = $("#wares_list_container_div");
                            waresContainer.html(reply['formHtml']);

                            $(".ware_select_link").each(function() {
                                var wareId = $(this).children(".hidden_id").text();
                                $(this).click(function() {
                                    //alert("selected ware with ID: " + wareId);
                                    $("#ware_input_id").val(wareId);
                                    $(container).dialog("destroy");
                                });
                                $(this).hover(function() {
                                    $(this).addClass("hover_link");
                                }, function() {
                                    $(this).removeClass("hover_link");
                                });
                            });
                            $(".page_select_link").each(function() {
                                var pageNum = $(this).children(".hidden_id").text();
                                $(this).click(function() {
                                    //alert("selected page number: " + pageNum);
                                    onWaresGroupSelect(groupId, pageNum);
                                });
                                $(this).hover(function() {
                                    $(this).addClass("hover_link");
                                }, function() {
                                    $(this).removeClass("hover_link");
                                });
                            });
                        }
                    } else {
                        alert("Server error");
                    }
                },
                error: function(error) {
                    alert(error);
                    window.location.reload(true);
                }
            });
        };


        $(".dialog_link_recipe").add( $("a", this) ).hoverClass();

        var rsd = new RecipesSelectDialog("recipes_select_dialog", "<c:url value="/get-select-recipes-form.html"/>", "<c:url value="/get-recipes-list.html"/>");

        $(".dialog_link_recipe").click(function(){
            rsd.onRecipeDialogLinkClick("recipe_input_id", "recipe_input_name", function(recipeId, recipeName) {
                alert("Recipe{id: " + recipeId + ", name: " + recipeName + "}");
                showLoading();
                //window.location.reload(true);
            });
        });

        var regsd = new RegionsSelectDialog("regions_select_dialog", "<c:url value="/get-select-region-form.html"/>");

        $(".dialog_link_region").click(function(){
            regsd.onRegionDialogLinkClick(function(regionId, regionName) {
                showLoading();
                alert("Region{id: " + regionId + ", name: " + regionName + "}");
                hideLoading();
                //window.location.reload(true);
            });
        });


        var isd = new IngredientsSelectDialog("ingredients_select_dialog", "<c:url value="/get-select-ingredients-form.html"/>", "<c:url value="/get-ingredients-list.html"/>");

        $(".dialog_link_ingredient").click(function(){
            isd.onIngredientDialogLinkClick(function(ingredient, defWaresViews) {
                showLoadingDialog();
                alert("ingredient{id: " + ingredient["id"] + ", name: " + ingredient["name"] + "}");
                hideLoadingDialog();
                //window.location.reload(true);
            });
        });

        /*
        $(".folder").unbind("click.treeview").bind("click.treeview", function(event) {
            var url = $(this).children(".hidden_id").text();
			alert("Folder clicked!!! - YPA");
		}).add( $("a", this) ).hoverClass();
*/

/*

        $(".folder").click(function () {
            alert("Folder clicked!!!");
        });
*/
/*
        $("#test_browser").treeview({
            toggle: function() {
                console.log("%s was toggled.", $(this).find(">span").text());
            }
        });
*/
    });
    
    function showLoading() {

        $("#loading_dialog").dialog({
            "modal":true,
            "resizable":false,
            "title": 'loading',
            minHeight: 300,
            minWidth: 300,
            closeOnEscape: false,
            draggable: false,
            position: ['center', 'center'],
            open : function(event, ui) {
                $(".ui-dialog-titlebar").hide();
            },
            close : function(event, ui) {
                $(".ui-dialog-titlebar").show();
            }
        });

        //ui-dialog-titlebar

      //$("#loading").show();
    }

    function hideLoading() {
      $("#loading").hide();
    }


    </script>
</head>
<body>
<c:import url="../pagemenus/mainUserMenu.jsp"/>
<br/>
<table>
    <tr>
        <td>
            <c:out value="${user.userName}"/> (<c:out value="${user.fullName}"/>)
        </td>
    </tr>
    <tr>
        <td>
            <table border="1">
                <tr>
                    <th colspan="7" align="left">user's tables</th>
                </tr>
                <tr>
                    <th>name</th>
                    <th>type</th>
                    <th>periodLength</th>
                    <th>from</th>
                    <th>to</th>
                    <th>permanent</th>
                    <th>act</th>
                </tr>
                <c:forEach var="userTable" items="${user.usersTables}">
                    <tr>
                        <td><c:out value="${userTable.name}"/></td>
                        <td><c:out value="${userTable.type}"/></td>
                        <td><c:out value="${userTable.periodLength}"/></td>
                        <td>
                            <fmt:formatDate value="${userTable.from}" pattern="dd.MM.yyyy"/>
                        </td>
                        <td>
                            <fmt:formatDate value="${userTable.to}" pattern="dd.MM.yyyy"/>
                        </td>
                        <td><c:out value="${userTable.permanent}"/></td>
                        <td>
                            <a href="<c:url value="/userstable-get.html"><c:param name="id" value="${userTable.id}"/></c:url>">view/edit</a>
                            <br/>
                            <a href="<c:url value="/userstable-remove.html"><c:param name="id" value="${userTable.id}"/></c:url>">remove</a>
                        </td>
                    </tr>
                </c:forEach>
                <tr>
                    <td colspan="7">
                        <a href="<c:url value="/usertable-add.html"/>">ADD</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<br/>
<span class="dialog_link">show dialog</span>
<input id="ware_input_id" value="select ware with dialog" disabled="true">
<br/>

<br/>
<span class="dialog_link_recipe">show dialog</span>
<input id="recipe_input_id" value="select recipe with dialog" disabled="true">
<input id="recipe_input_name" value="select recipe with dialog" disabled="true">
<br/>

<br/>
<span class="dialog_link_region">select region</span>
<br/>

<br/>
<span class="dialog_link_ingredient">select ingredient</span>
<br/>

<%--
<div id="tree_div">
<ul id="test_browser" class="filetree treeview-famfamfam">
    <li><span class="folder"><span class="hidden_id">1</span>Folder 1</span>
        <ul>
            <li><span class="folder"><span class="hidden_id">11</span> Item 1.1</span>
                <ul>
                    <li><span class="file">Item 1.1.1</span></li>
                </ul>
            </li>
            <li><span class="folder">Folder 2</span>
                <ul>
                    <li><span class="folder"><span class="hidden_id">21</span>Subfolder 2.1</span>
                        <ul id="folder21">
                            <li><span class="file">File 2.1.1</span></li>
                            <li><span class="file">File 2.1.2</span></li>
                        </ul>
                    </li>
                    <li><span class="folder"><span class="hidden_id">22</span>Subfolder 2.2</span>
                        <ul>
                            <li><span class="file">File 2.2.1</span></li>
                            <li><span class="file">File 2.2.2</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="closed"><span class="folder"><span class="hidden_id">3</span>Folder 3 (closed at start)</span>
                <ul>
                    <li><span class="file">File 3.1</span></li>
                </ul>
            </li>
            <li><span class="file">File 4</span></li>
        </ul>
    </li>
</ul>
</div>
--%>

<div id="dialog_container" style="display:none;">

    <div id="wares_groups_select_dialog">
        loading wares groups... 
    </div>
</div>

<div id="recipes_select_dialog" style="display:none;">

    <div id="">
        loading recipes groups...
    </div>

</div>

<div id="regions_select_dialog" style="display:none;">

    <div id="1">
        loading regions groups...
    </div>

</div>

<div id="ingredients_select_dialog" style="display:none;">

    <div id="2">
        loading ingredients groups...
    </div>

</div>

<!--div id="loading_dialog" style="display:none;">
    <img src="img/loading.gif" style="text-align:center;" width="100%" height="100%" />
</div-->


</body>
</html>


